<template>
    <div class="all">
        <header>
          <div class="div" @click="onClickLeft()">
              <img src="../../assets/fff返回.png" alt="">
              <span>返回</span>
          </div>
          <div class="div">
              <span>修改资料</span>
          </div>
          <div class="div" @click="onClickRight()">
              <span>保存</span>
          </div>
        </header>
        <div>
          <div class="headPortrait">
              <div class="img_left">
                  <span>头像</span>
              </div>
              <div class="img_right">
                  <van-uploader v-model="fileList"
                                multiple
                                :after-read="afterRead"
                                :before-read="beforeRead"
                                @click-preview="clickPerview"
                                result-type="dataUrl"
                                :max-count="1"
                                ref="uploader"
                                @delete="Delete"
                                :preview-full-image="false"
                                preview-size="60px"
                  >
<!--                    <van-uploader-->
<!--                                  multiple-->
<!--                                  :after-read="afterRead"-->
<!--                                  :before-read="beforeRead"-->
<!--                                  @click-preview="clickPerview"-->
<!--                                  result-type="dataUrl"-->
<!--                                  :max-count="1"-->
<!--                                  ref="uploader"-->
<!--                                  @delete="Delete"-->
<!--                                  :preview-full-image="false"-->
<!--                                  preview-size="60px"-->
<!--                    >-->
<!--                      <template #default>-->
<!--                        <img class="photo" v-if="fileList.length>0" :src="fileList[0].url" alt="">-->
<!--                      </template>-->
                  </van-uploader>
              </div>
          </div>
          <van-field
                  v-model="name"
                  label="姓名"
                  placeholder="请输入姓名"
                  input-align="right"
          />
          <van-field
                  v-model="shenfenzhenghao"
                  label= "身份证号"
                  placeholder="请输入身份证号"
                  input-align="right"
          />
          <van-field
                  v-model="phone"
                  label="联系电话"
                  placeholder="请输入联系电话"
                  input-align="right"
          />
          <van-field
                  v-model="nick_name"
                  label="昵称"
                  placeholder="请输入昵称"
                  input-align="right"
          />
          <van-field
            v-model="address"
            label= "家庭住址"
            placeholder="请选择家庭住址"
            input-align="right"
            @click="addressShow"
            readonly
          >
            <template #right-icon>
              <van-icon name="arrow-down" />
              <!--          :click="{addressShow : isAdd == 0}"-->
            </template>
          </van-field>
          <van-field
            v-model="xiangxiaddress"
            label= "详细住址"
            placeholder="请填写详细住址"
            input-align="right"
          />
       <!--     <van-field
              v-model="diagnose"
              label= "初步诊断"
              placeholder="请选择初步诊断"
              input-align="right"
              @click="diagnoseClick"
              readonly
            >
              <template #right-icon>
                <van-icon name="arrow-down" />
              </template>
            </van-field>-->
          <van-field
            v-show="role!==2"
            v-model="emergencycontact"
            label="紧急联系人"
            placeholder="请输入紧急联系人"
            input-align="right"
          />
          <van-field
            v-show="role!==2"
            v-model="emergencycontactphone"
            label="紧急联系人电话"
            placeholder="请输入紧急联系人电话"
            input-align="right"
          />
          <van-field
            v-show="role!==2"
            v-model="familydoctor"
            label="家庭医生"
            placeholder="请输入家庭医生"
            input-align="right"
          />
          <van-field
            v-show="role!==2"
            v-model="physicalcondition"
            label="身体状况"
            placeholder="请输入身体状况"
            input-align="right"
          />
          <van-field
            v-show="role!==2"
            v-model="sleep"
            label="睡眠质量"
            placeholder="请输入睡眠质量"
            input-align="right"
            readonly
            @click="sleepShow = true"
          >
            <template #right-icon>
              <van-icon name="arrow-down" />
            </template>
          </van-field>
          <van-field
            v-show="role!==2"
            v-model="livingenvironment"
            label="居住环境"
            placeholder="请输入居住环境"
            input-align="right"
          />
          <van-field
            v-show="role!==2"
            v-model="activity"
            label="活动频率"
            placeholder="请输入活动频率"
            input-align="right"
          />
          <van-field
            v-show="role!==2"
            v-model="eatinghabits"
            label="饮食习惯"
            @click="eatShow = true"
            placeholder="请输入饮食习惯"
            input-align="right"
            readonly
          >
            <template #right-icon>
              <van-icon name="arrow-down" />
            </template>
          </van-field>
        </div>
      <van-popup round class="place"   v-model="show" position="bottom" :style="{ height: '50%' }" >
        <van-area item-height="15vw" @cancel="cancel" @confirm="onAreaConfirm" title="请选择家庭住址" :area-list="areaList" />
      </van-popup>
      <van-popup round class="place"   v-model="eatShow" position="bottom" :style="{ height: '50%' }" >
        <van-picker show-toolbar
                    @cancel="eatShow = false"
                    @confirm="eatConfirm"
                    :columns="eatColumns"
                    title="请选择饮食习惯"></van-picker>
      </van-popup>
      <van-popup round class="place"   v-model="sleepShow" position="bottom" :style="{ height: '50%' }" >
        <van-picker show-toolbar
                    @cancel="sleepShow = false"
                    @confirm="sleepConfirm"
                    :columns="sleepColumns"
                    title="请选择睡眠质量"></van-picker>
      </van-popup>
      <!--<van-popup v-model="showPicker" round position="bottom" :style="{ height: '60%' }">
        <van-picker show-toolbar
                    @cancel="showPicker = false"
                    @confirm="onConfirm"
                    :columns="columns"
                    title="初步诊断选项"
                    :loading="loading" >
          <template #columns-top>
              <div class="search">
              <form action="/">
                <van-search
                  v-model="value"
                  show-action
                  placeholder="请输入初步诊断"
                  @search="onSearch"
                  shape="round"
                >
                  <template #action>
                    <div @click="onSearch">搜索</div>
                  </template>
                </van-search>
              </form>
            </div>
          </template>
&lt;!&ndash;          <van-empty image="search" v-show="searchShow === true" description="请进行初步诊断搜索" />&ndash;&gt;
        </van-picker>
      </van-popup>-->
    </div>
</template>

<script>
// import axios from 'axios'
import videoHttp from '../../http/video.http'
import {Toast} from 'vant'
import area from '../../components/China/area'
export default {
  name: 'PersonInfo',
  data () {
    return {
      searchShow: true,
      areaList: area, // 存储全国地址
      show: false,
      showPicker: false,
      loading: false,
      columns: [],
      value: '',
      name: '', // 存储输入的姓名
      fileList: [],
      shenfenzhenghao: '', // 存储输入的身份证号码
      phone: '', // 存储手机号码
      nick_name: '', // 昵称
      photoUrl: '',
      userid: '',
      address: '', // 家庭地址
      xiangxiaddress: '', // 详细住址
      diagnose: '', // 初步诊断
      emergencycontact: '', // 紧急联系人
      emergencycontactphone: '', // 紧急联系人电话
      familydoctor: '', // 家庭医生
      physicalcondition: '', // 身体状况
      sleep: '', // 睡眠质量
      livingenvironment: '', // 居住环境
      activity: '', // 活动情况
      eatinghabits: '', // 饮食习惯
      model: '',
      eatShow: false,
      eatColumns: ['荤素均衡', '素食为主', '荤食为主', '素食主义者'],
      sleepShow: false,
      sleepColumns: ['良好', '一般', '较差'],
      role: Number(sessionStorage.getItem('role'))
    }
  },
  mounted () {
  // 截取网址后的userid
    this.userid = this.$utils.getUrlKey('userid')
    this.getPeople()
    // if (sessionStorage.getItem('sys') === 'ANDROID') {
    //   this.model = 'ANDROID'
    // } else {
    //   this.model = 'vue'
    // }
    this.model = 'vue'
    this.getZhenduan()
  },
  methods: {
    // 初步诊断搜索按钮
    onSearch (val) {
      console.log(this.value)
      if (this.value === '' || this.value === undefined) {
        Toast('请输入初步诊断关键字')
      } else {
        this.loading = true
        this.getZhenduan()
      }
    },
    // 获取诊断
    getZhenduan () {
      this.$http.getDiagnoseList({key: this.value})
        .then(res => {
          console.log(res)
          this.columns = []
          if (res.data.status === 'success') {
            for (var i = 0; i < res.data.data.length; i++) {
              this.columns.push(res.data.data[i].name)
            }
          }
          this.loading = false
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 初步诊断点击 弹出事件
    diagnoseClick () {
      this.showPicker = true
    },
    // 选择初步诊断信息的确定按钮
    onConfirm (value) {
      this.diagnose = value
      this.showPicker = false
    },
    // 饮食选择确认按钮
    eatConfirm (value) {
      this.eatinghabits = value
      this.eatShow = false
    },
    // 睡眠质量确认按钮
    sleepConfirm (value) {
      this.sleep = value
      this.sleepShow = false
    },
    // 点击返回
    onClickLeft () {
      // 返回上一页
      this.$router.go(-1)
    },
    // 点击保存
    onClickRight () {
      // if (this.diagnose.length > 0) {
      // 有图片传入
      if (this.photoUrl !== undefined && this.photoUrl !== '') {
        this.$http.updatePersonal({
          // USER_ID: this.userid,
          ID: this.shenfenzhenghao,
          PHONE: this.phone,
          NICK_NAME: this.name,
          file: this.photoUrl,
          NICK_NAME2: this.nick_name,
          LOCATION: this.address,
          LOCATIONDETAIL: this.xiangxiaddress,
          emergencycontact: this.emergencycontact,
          emergencycontactphone: this.emergencycontactphone,
          familydoctor: this.familydoctor,
          physicalcondition: this.physicalcondition,
          sleep: this.sleep,
          livingenvironment: this.livingenvironment,
          activity: this.activity,
          eatinghabits: this.eatinghabits,
          DIAGNOSE: this.diagnose
        })
          .then(res => {
            console.log(res)
            if (res.data === 'iderr') {
              Toast('身份证格式不正确')
            } else if (res.data === 'uploadfailure') {
              Toast('头像上传失败')
            } else if (res.data === 'phoneexist') {
              Toast('手机号已存在')
            } else if (res.data === 'idexist') {
              Toast('身份证已存在')
            } else if (res.data === 'phoneerr') {
              Toast('手机号格式不正确')
            } else if (res.data === 'success') {
              Toast('修改成功')
              window.history.go(-1)
            }
          })
          .catch(err => {
            console.log(err)
          })
      } else { // 没有图片传入
        this.$http.updatePersonal({
          // USER_ID: this.userid,
          ID: this.shenfenzhenghao,
          PHONE: this.phone,
          NICK_NAME: this.name,
          file: this.photoUrl,
          NICK_NAME2: this.nick_name,
          LOCATION: this.address,
          LOCATIONDETAIL: this.xiangxiaddress,
          emergencycontact: this.emergencycontact,
          emergencycontactphone: this.emergencycontactphone,
          familydoctor: this.familydoctor,
          physicalcondition: this.physicalcondition,
          sleep: this.sleep,
          livingenvironment: this.livingenvironment,
          activity: this.activity,
          eatinghabits: this.eatinghabits,
          DIAGNOSE: this.diagnose
        })
          .then(res => {
            console.log(res)
            if (res.data === 'iderr') {
              Toast('身份证格式不正确')
            } else if (res.data === 'uploadfailure') {
              Toast('头像上传失败')
            } else if (res.data === 'phoneexist') {
              Toast('手机号已存在')
            } else if (res.data === 'idexist') {
              Toast('身份证已存在')
            } else if (res.data === 'phoneerr') {
              Toast('手机号格式不正确')
            } else if (res.data === 'success') {
              Toast('修改成功')
              window.history.go(-1)
            }
          })
          .catch(err => {
            console.log(err)
          })
      }
      // }
      // else {
      //   Toast('请选择初步诊断')
      // }
    },
    // 获取个人基本信息
    getPeople () {
    //  http://jmx-kfdj.com/kfhl/miniindex/findPersonal
      this.$http.findPersonal({}) // USER_ID: this.userid
        .then(res => {
          console.log(res)
          this.nick_name = res.data.NICK_NAME2
          this.activity = res.data.activity
          this.address = res.data.address
          this.xiangxiaddress = res.data.xiangxiaddress
          this.age = res.data.age
          this.birthday = res.data.birthday
          this.diagnose = res.data.DIAGNOSE
          this.eatinghabits = res.data.eatinghabits
          this.emergencycontact = res.data.emergencycontact
          this.emergencycontactphone = res.data.emergencycontactphone
          this.familydoctor = res.data.familydoctor
          this.livingenvironment = res.data.livingenvironment
          this.name = res.data.name
          this.phone = res.data.phone
          this.physicalcondition = res.data.physicalcondition
          this.sex = res.data.sex
          this.shenfenzhenghao = res.data.shenfenzhenghao
          this.sleep = res.data.sleep
          this.xiangxiaddress = res.data.xiangxiaddress
          //  http前缀
          if (res.data.PHOTO.substring(0, 4) === 'http') {
            var agg = {
              url: res.data.PHOTO,
              isImage: true
            }
            this.fileList.push(agg)
          } else {
          //    videoHttp.imgHttp
            var add = {
              'url': videoHttp.imgHttp + res.data.PHOTO,
              isImage: true
            }
            this.fileList.push(add)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    clickPerview () {
    },
    // 文件上传
    afterRead (file) {
      this.photoUrl = file.content
      // console.log(file)
      // console.log(this.fileList)
    },
    // 返回布尔值
    beforeRead (file) {
      if (file.type !== 'image/jpeg') {
        Toast('请上传 jpg 格式图片')
        return false
      }
      return true
    },
    // 文件删除
    Delete (file) {
      this.photoUrl = ''
    },
    // 点击住址展示
    addressShow () {
      this.show = true
    },
    // 获取住址
    onAreaConfirm (val) {
      this.show = false
      // 获取地区
      var addInfo = val[0].name + val[1].name + val[2].name
      this.address = addInfo
    },
    // 地址选择取消
    cancel () {
      this.show = false
    }
  }
}
</script>

<style scoped>
  header {
      width: 100%;
      position: sticky;
      top: 0;
      height: 12vw;
      display: flex;
      align-items: center;
      z-index: 9999;
    border-bottom: 1px solid #E5E5E5;
      background: linear-gradient(90deg, #1DA3F2, #1DC7F2);
  }
  header .div {
      width: 33%;
      height: 100%;
      color: #FFFFFF;
      display: flex;
      align-items: center;
      font-family: PingFang SC;
      font-weight: bold;
    font-size: 15px;
  }
  header .div:nth-child(2) {
      justify-content: center;
  }
  header .div:nth-child(3) {
      justify-content: flex-end;
  }
  header .div:nth-child(3) span{
      margin-right: 15px;
  }
  header .div img{
      width: 7px;
      height: 13px;
      margin: 0 5px 0 15px;
  }
    .headPortrait{
        width: 92%;
        display: flex;
        justify-content: space-between;
        /*padding: 10px 16px;*/
        padding: 5px 0;
        box-sizing: border-box;
        border-bottom: 1px solid #ebedf0;
        margin: 0 auto;
    }
    .img_left{
        width: 6.2em;
        font-size: 14px;
        display: flex;
        align-items: center;
        color: #646566;
    }
    .img_right{
    }
    /deep/ .van-uploader__upload, /deep/ .van-uploader__preview-image{
        border-radius: 50%;
    }
  /deep/ .van-field__label{
    width: 9.2em;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
  }
  .pickerHeader, .search{
    width: 100%;
  }
  .pickertop{
    width: 100%;
    height: 88px;
  }
  /deep/  .search .van-field__control{
    font-size: 15px !important;
    font-weight: bold;
  }
  /deep/ .van-search{
    font-size: 15px !important;
    font-weight: bold;
  }
  /deep/ .van-search__action{
    font-size: 15px;
    color: #1da4f2;
    font-weight: bold;
  }
  /deep/ .van-picker__confirm{
    font-size: 15px;
    color: #1da4f2;
    font-weight: bold;
  }
  /deep/ .van-picker__cancel{
    font-size: 15px;
    font-weight: bold;
  }
  .photo{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
  }
  /*/deep/ .van-uploader__preview-delete{*/
  /*  width: 15px;*/
  /*  height: 15px;*/
  /*}*/
</style>
